import React from 'react'
import { Form, Row, Button, Select, Input, Col } from 'antd';
const FormItem = Form.Item;
const { Option } = Select

const SearchForm = ({ form: { getFieldDecorator, getFieldsValue, resetFields }, onSearch, onClick, onClick1, advanced }) => {
    const cz = () => {
        if (onClick) {
            onClick();
        }
    };
    const advancedss = () => {
        if (onClick1) {
            onClick1();
        }
    }

    const formItemLayout = {
        // 抽屉里面Form。二列的布局比例
        labelCol: {
            span: 6
        },
        wrapperCol: {
            span: 16
        }
    };
    return (
        <Form className="search-form">
            <Row gutter={24}>
                <Col span={5}>
                    <FormItem label='表单编码:'{...formItemLayout}>
                        {getFieldDecorator('code', {
                            getValueFromEvent: (event) => {
                                return event.target.value.replace(/\s+/g, "")
                            },
                        })(<Input placeholder="请输入表单编码" allowClear onPressEnter={() => onSearch(getFieldsValue())} maxLength={20} />)}

                    </FormItem>
                </Col>
                <Col span={5}>
                    <FormItem label='表单名称:'{...formItemLayout}>
                        {getFieldDecorator('name', {
                            getValueFromEvent: (event) => {
                                return event.target.value.replace(/\s+/g, "")
                            },
                        })(<Input placeholder="请输入表单名称" allowClear onPressEnter={() => onSearch(getFieldsValue())} maxLength={20} />)}
                    </FormItem>
                </Col>
                <Col span={5}>
                    <FormItem label='表单类型:'{...formItemLayout}>
                        {getFieldDecorator('type')(
                            <Select placeholder='请输入' allowClear={true}>
                                <Option value="0">试机</Option>
                                <Option value="1">自检</Option>
                                <Option value="2">质检</Option>
                            </Select>
                        )}
                    </FormItem>
                </Col>
                <Col span={5}>
                    <FormItem label='适用对象:'{...formItemLayout}>
                        {getFieldDecorator('object', {
                            getValueFromEvent: (event) => {
                                return event.target.value.replace(/\s+/g, "")
                            },
                        })(<Input placeholder="请输入适用对象" allowClear onPressEnter={() => onSearch(getFieldsValue())} maxLength={20} />)}
                    </FormItem>
                </Col>
                <Col span={4} style={{ display: 'flex' }} className="serarch-btns">

                    <FormItem>
                        <Button type="primary" onClick={() => onSearch(getFieldsValue())} icon="search">
                            {'查询'}
                        </Button>
                    </FormItem>
                    <FormItem>
                        <Button type='primary' icon={advanced ? 'up' : 'down'} onClick={() => advancedss()}>
                            {' 展开'}
                        </Button>
                    </FormItem>
                    <FormItem>
                        <Button type="default" onClick={() => {
                            cz()
                            resetFields()

                        }}
                            icon={'redo'}
                        >
                            {'重置'}
                        </Button>
                    </FormItem>
                </Col>
            </Row>
            <Row gutter={24}>
                {
                    advanced ? <Col span={5}>
                        <FormItem label='创建人:'{...formItemLayout}>
                            {getFieldDecorator('createrId', {
                                getValueFromEvent: (event) => {
                                    return event.target.value.replace(/\s+/g, "")
                                },
                            })(<Input placeholder="请输入创建人" allowClear onPressEnter={() => onSearch(getFieldsValue())} maxLength={20} />)}
                        </FormItem>
                    </Col> : ''
                }
                {
                    advanced ? <Col span={5}>
                        <FormItem label='状态:'{...formItemLayout}>
                            {getFieldDecorator('isDelete')(
                                <Select placeholder='请输入' allowClear={true} >
                                    <Option value={0} key={1}>启动</Option>
                                    <Option value={1} key={2}>停用</Option>
                                </Select>
                            )}
                        </FormItem>
                    </Col> : ''
                }
            </Row>
        </Form>
    )
};
export default Form.create()(SearchForm);